'use client';

import { cn } from '@/lib/utils';
import { HTMLAttributes } from 'react';

export interface GlassSidebarProps extends HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  position?: 'left' | 'right';
  isOpen?: boolean;
}

/**
 * GlassSidebar - Apple-style glassmorphism sidebar
 * 
 * Features:
 * - Frosted glass effect
 * - Smooth slide animation
 * - Left/right positioning
 * - Responsive design
 */
export default function GlassSidebar({
  children,
  className,
  position = 'left',
  isOpen = true,
  ...props
}: GlassSidebarProps) {
  const positionClasses = {
    left: isOpen ? 'translate-x-0' : '-translate-x-full',
    right: isOpen ? 'translate-x-0' : 'translate-x-full',
  };

  return (
    <aside
      className={cn(
        'fixed top-[100px] h-[calc(100vh-116px)] w-64 z-40',
        'ml-4 mb-4 rounded-2xl',
        'bg-white/70 backdrop-blur-xl backdrop-saturate-150',
        'border border-gray-200/40',
        'dark:bg-white/10 dark:border-white/20',
        'shadow-[0_8px_32px_0_rgba(99,102,241,0.08)]',
        'dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]',
        'transition-transform duration-300 ease-in-out',
        'glass-scrollbar overflow-y-auto',
        position === 'left' ? 'left-0' : 'right-0',
        positionClasses[position],
        className
      )}
      {...props}
    >
      {children}
    </aside>
  );
}

